<template>
  <div>
    <el-dialog :visible="visible" title="砍价详情" :before-close="beforeClose" :close-on-click-modal="false">
      <el-table ref="topicTable" v-loading.lock="loading" :data="datas" style="width: 100%" height="400">
        <el-table-column label="帮砍价用户" prop="phone" />
        <el-table-column label="砍价时间" prop="create_time" />
        <el-table-column label="砍价金额">
          <template slot-scope="scope">
            <span>{{ scope.row.current_bargain_price | moneySymbol }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="paginate.page"
        :page-size="paginate.count"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    bargainId: {
      type: Number,
      required: true
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      paginate: {
        count: 10,
        page: 1
      },
      loading: true,
      response: null
    };
  },
  computed: {
    datas() {
      if (this.response) {
        return this.response.data.datas;
      }
      return [];
    },
    total() {
      if (this.response) {
        return this.response.data.paginate.total;
      }
      return 0;
    }
  },
  created() {
    this.loadInfo();
  },
  methods: {
    loadInfo() {
      this.loading = true;
      this.$http.get(
        '/admin/promotion/bargain/' + this.$route.params.id + '/report/' + this.bargainId + '/bargain',
        this.paginate,
        response => {
          this.loading = false;
          this.response = response;
        },
        _ => {
          this.loading = false;
        },
        false
      );
    },
    handleCurrentChange(page) {
      this.paginate.page = page;
      this.loadInfo();
    },
    beforeClose() {
      this.$emit('update:visible', false);
    }
  }
};
</script>
